<template>
  <div class="nav" :safe-area-inset-bottom="true">
    <ul>
      <li :class="{action:num==0}"><router-link to='/'><div class="iconfont icon-shouye"></div>首页</router-link></li>
      <li :class="{action:num==1}"><router-link to='/viewShop/'><div class="iconfont icon-shangpu"></div>查看商铺</router-link></li>
      <li :class="{action:num==2}"><router-link to='/release/'><div class="iconfont icon-fabujishu"></div>发布</router-link></li>
      <li :class="{action:num==3}"><router-link to='/my/'><div class="iconfont icon-ren"></div>个人中心</router-link></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Nav',
  props: {
    num: Number
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  .nav
    width 100%
    height .98rem
    position fixed
    bottom 0px
    left 0px
    z-index 9
    box-shadow 0px -1px 3px 0px rgba(4, 0, 0, 0.05)
    background-color #fff
    ul
      width 100%
      height 100%
      li
        width 25%
        height 100%
        font-size 0.2rem
        float left
        text-align center
        a
          width 100%
          height 100%
          display inherit
          padding-top .14rem
          color #999999
          .iconfont
            font-size .4rem
      .action
        a
          color #EF390F
          .iconfont
            text-shadow 1px 1px 2px rgba(255, 1, 1, 0.42)
</style>
